<template>
  <div class="w750 white-bg" :class="themes.theme">
    <div class="m-tabs">
      <a href="javascript:;" class="item" :class="{'line-on': couponStatus == 1}" @click="changeStatus(1)"><span class="txt">未使用</span></a>
      <a href="javascript:;" class="item" :class="{'line-on': couponStatus == 2}" @click="changeStatus(2)"><span class="txt">已使用</span></a>
      <a href="javascript:;" class="item" :class="{'line-on': couponStatus == 3}" @click="changeStatus(3)"><span class="txt">已过期</span></a>
    </div>
    <div class="coupons">
      <div class="get-coupons">
        <van-list
          v-model="paging.loading"
          :finished="paging.finished"
          finished-text="没有更多了"
          @load="onLoadMore"
          v-if="paging.tab"
          :immediate-check="false"
        >
          <div class="list-item" :class="{'coupon-got' : couponStatus == 1, 'used' : couponStatus != 1}" v-for="(item,index) in couponList" :key="index">
            <div class="left">
              <div class="num">&#65509;<span class="price">{{item.offPrice}}</span></div>
              <span class="condition">满{{item.fullPrice}}元可用</span>
            </div>
            <div class="right">
              <div class="des">
                <i class="coupon-style" v-if="item.couponType == 'shop'">店铺</i>
                <i class="coupon-style" v-else-if="item.couponType == 'product'">商品</i>
                {{item.couponName}}
              </div>
              <div class="han">
                <span class="use-time">{{ item.startDate | dateformat('YYYY-MM-DD')}}-{{ item.endDate | dateformat('YYYY-MM-DD')}}</span>
                <button class="get-btn" v-if="couponStatus == 1" @click="tapToreceive(item)">去使用</button>
                <button class="get-btn" v-if="couponStatus == 2">已使用</button>
                <button class="get-btn" v-else-if="couponStatus == 3">已过期</button>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
    <div class="empty"  v-if="!couponList || !couponList.length">
      <div class="item-img"><img src="../../../assets/images/red-empty.png" alt=""></div>
      <div class="item-txt">您没有可用的优惠券</div>
      <div class="item-btn" @click="goRecCenter">去领取</div>
    </div>
    <div style="height: 38x;width: 100%;">

    </div>
    <div class="coupon-btn">
      <a href="javascript:;" class="btn-a" @click="goRecCenter">领券中心</a>
      <!-- <a href="javascript:;" class="btn-a" @click="goGetCoupon">卡密领券</a> -->
    </div>
  </div>
</template>

<script>
  import { Swipe , SwipeItem  , NavBar , List } from "vant";
  import {mapState} from 'vuex'
  import { coupon } from "api/coupon";
  import PageUtil from 'utils/PageUtil';
  const pageUtil = new PageUtil(coupon, {field: {
      list: "couponList"
  }});
  export default {
    components: {
      NavBar
    },
    data() {
      return {
        couponList: [],                 //优惠券列表
        couponStatus: 1,                 //优惠券状态
        paging: {
          tab: false,
          currPage : 1,
          pageSize: 0,
          total: 0,
          loading: false,
          finished: false
        }
      };
    },

    watch: {

    },
    mounted() {
      let that = this


      var params = {status: this.couponStatus};
      this.loadCoupons(params);
    },
    methods: {
      //改变 状态
      changeStatus(status) {
        this.couponStatus = status
        this.couponList = []
        var params = {status: this.couponStatus};
        this.loadCoupons(params);
      },

      // 加载更多
      onLoadMore() {
        pageUtil.loadListByPageMore();
      },

      //判断是否有更多
      

      /**
       * 加载优惠券列表
       */
      loadCoupons(params){
        pageUtil.loadListByPage(this, params);
      },
      
      //卡密领取卡券
      goGetCoupon() {
        this.$router.push({
          path: `/recPacket`,
          query: {
            getType: 'shop'
          }
        });
      },

      //优惠券中心
      goRecCenter() {
        this.$router.push('/walletModules/recCenter/recCenter')
      },

      //去使用
      tapToreceive(item) {
        this.$router.push({
          path: `/searchList`,
          query: {
            couponDesc: item.couponDesc,
            source: 'coupon',
            couponId: item.couponId
          }
        });
      }
    },
    computed: {
      ...mapState(['themes']),
    }
  };
</script>


<style src="../../../assets/css/get-coupons.css" scoped></style>
<style src="../../../assets/css/empty.css" scoped></style>
<style scoped>
.m-tabs{
  position: fixed;
  width: 100%;
  max-width: 750px;
  background: #fff;
  z-index: 1;
}

.coupon-btn .btn-a {
  display: block;
  float: left;
  width: 100%;
  text-align: center;
  position: relative;
  line-height: 28px;
  font-size: 14px;
}

.coupon-btn .btn-a:first-child:after {
  height: 14px;
  width: 0px;
  content: " ";
  display: block;
  font-size: 0;
  background: #ccc;
  position: absolute;
  right: 0;
  top: 8px;
}
</style>

